<template>
    <div class="box">
        <!-- 头部banner -->
        <div class="top">
            <van-row gutter="32">
                <!-- <router-link to="/Risktest">
                    <van-col span="8"><van-icon name="arrow-left" /></van-col>
                </router-link> -->
                <van-col span="8" @click="$router.go(-1)"><van-icon name="arrow-left" /></van-col>
                <van-col span="8" class="text">风险能力测评</van-col>
                <van-col span="8"><van-icon name="ellipsis" /></van-col>
            </van-row>
        </div>
        <!-- 风险承受能力等级 -->
        <div class="risk-level">
            <img src="./assets/等级显示.svg" alt="请找lzb调试">
        </div>
        <!-- 推荐产品 -->
        <div class="risk-product">
            <p>以下是根据您的风险等级推荐的产品：</p>
            <div class="product1" @click="toggleStar1">
                <img v-if="showStar1" src="./assets/五角星.svg" alt="请找lzb调试">
                <img v-else src="./assets/冒光五角星.svg" alt="请找lzb调试">
            </div>
            <div class="product2" @click="toggleStar2">
                <img v-if="showStar2" src="./assets/冒光五角星.svg" alt="请找lzb调试">
                <img v-else src="./assets/五角星.svg" alt="请找lzb调试">
            </div>
        </div>
        <!-- 底部 -->
        <div class="footer">
            <img src="./assets/底部文字.svg" alt="请找lzb调试" class="text">
            <router-link to="/RiskIndex">
                <img src="./assets/重新测评按钮.svg" alt="请找lzb调试">
            </router-link>
            <div class="height"></div>
        </div>
    </div>
</template>

<script>
import router from '../../router';

export default {
    data() {
        return {
            showStar1: true, // 初始值，可以根据需要进行修改
            showStar2: true // 初始值，可以根据需要进行修改
        };
    },
    methods: {
        toggleStar1() {
            this.showStar1 = !this.showStar1;
        },
        toggleStar2() {
            this.showStar2 = !this.showStar2;
        }
    }
}

</script>

<style scoped>
.box {
    height: 100%;
    background-image: url('./assets/背景图.svg');
}

/* 头部banner */
.top {
    height: 30px;
    position: relative;
    border: 1px solid rgb(208, 234, 255);
}

.top .van-icon-arrow-left {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translate(-50%, -50%);

}

.top .van-icon-ellipsis {
    position: absolute;
    top: 50%;
    right: 3%;
    transform: translate(-50%, -50%);

}

.top .text {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 风险承受能力等级 */
.risk-level {
    margin-top: 20px;
}

.risk-level img {
    width: 100%;
    height: auto;
}

/* 推荐产品 */
.risk-product p {
    text-align: left;
    font-size: bold;
    margin-left: 5px;
    margin-bottom: 2px;
}

.product1 {
    background-image: url(./assets/产品1.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 200px;
    position: relative;
    margin-top: -10px;

}

.product1 img {
    position: absolute;
    top: 15%;
    right: 5%;

}

.product2 {
    background-image: url(./assets/产品2.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 200px;
    position: relative;
    margin-top: -25px;
}

.product2 img {
    position: absolute;
    top: 15%;
    right: 5%;
}

/* 底部 */
.footer .text {
    width: 90%;
    height: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}

.height {
    height: 18px;
}
</style>